<template>
	<view>
		<view class="remark-textarea">
			<textarea placeholder="填写额外对商家和骑手小哥的备注信息" :maxlength="50" v-model="value" />
			<text>{{value.split("").length}}/50个字</text>
		</view>
		<view class="remark-bottom">
			<text>快捷输入</text>
		</view>
		<view class="remark-list">
			<view v-for="(item,index) in list" @click="getlist(item,index)">
				<text>{{item.name}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: [],
				list: [{
					name: '多点辣',
				}, {
					name: '多点盐',
				}, {
					name: '多点香菜',
				}, {
					name: '多点蒜'
				}, {
					name: '多点葱'
				}, {
					name: '多点洋葱'
				}],
				value: ''
			}
		},
		methods: {
			getlist(item, index) {
				var strs = new Array();
				strs = item.name.split("");
				for (var i = 0, len = strs.length; i < len; i++) {
					this.text.push(strs[i]);
				}
				this.value = this.text.toString().replace(/,/g, '');
			},
			//保存备注
			onNavigationBarButtonTap() {
				uni.setStorageSync('remark', this.value)
				uni.navigateBack({
				
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.remark-textarea {
		width: 100%;

		textarea {
			width: 95%;
			font-size: 26rpx;
			padding-left: 20rpx;
			padding-top: 10rpx;
			margin: 20rpx auto;
			background-color: #f8f8f8;
			color: #000000
		}

		text {
			font-size: 25rpx;
			color: #b9afb5;
			position: relative;
			float: right;
			padding-right: 40rpx;
			top: -70rpx;
		}
	}

	.remark-bottom {
		text {
			display: block;
			font-size: 30rpx;
			color: #bdb0b0;
			padding-left: 20rpx;
		}
	}

	.remark-list {
		width: 80%;
		display: flex;
		//justify-content: space-around;
		flex-wrap: wrap;

		view {
			width: 140rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #baadc4;
			text-align: center;
			font-size: 25rpx;
			//margin-left:20rpx;
			margin-top: 30rpx;
			// /border:1px solid red;
			border: 1px solid #f8f8f8;
		}
	}
</style>
